import React, { useCallback, useEffect, useState } from 'react';
import { Button, Radio, Tabs } from 'antd';

import Wtable from './wtable';

type TabPosition = 'left' | 'right' | 'top' | 'bottom';

export default ({
  data,
  heads,
}: {
  data: { [key: string]: Array<Array<string>> };
  heads: string[];
}) => {
  const [activedKey, setActived] = useState(Object.keys(data)[0]);

  const createTable = useCallback(
    (key: string) => {
      const table = [];
      for (let i = 0; i < data[key].length; i += 1) {
        const list = data[key][i];
        const obj: Record<string, string> = {};
        for (let j = 0; j < heads.length; j += 1) {
          const name = heads[j];
          obj[name] = list[j];
        }

        table.push(obj);
      }
      return table;
    },
    [data, heads]
  );

  const exportActived = useCallback(() => {
    const stable = createTable(activedKey);
    window.electron.ipcRenderer.sendMessage('download', {
      name: activedKey,
      data: stable,
    });
  }, [activedKey, createTable]);

  const exportAll = useCallback(() => {
    const tables = Object.keys(data).map((key) => ({
      name: key,
      data: createTable(key),
    }));
    window.electron.ipcRenderer.sendMessage('downloadAll', tables);
  }, [data, createTable]);

  return (
    <div className="result">
      <div className="title">
        <span>
          共解析出：<b>{Object.keys(data).length} </b> 个子项
        </span>
        <Button.Group>
          <Button type="primary" onClick={exportActived}>
            导出当前
          </Button>
          <Button type="primary" onClick={exportAll}>
            全部导出
          </Button>
        </Button.Group>
      </div>
      <div className="content">
        <Tabs
          defaultActiveKey={activedKey}
          onChange={(key) => setActived(key)}
          tabPosition="left"
          style={{ height: '100%' }}
          items={Object.keys(data).map((key) => {
            return {
              label: key,
              key,
              children: (
                <div className="inner">
                  <Wtable head={heads} data={data[key]} />
                </div>
              ),
            };
          })}
        >
          {/* {Object.keys(data).map((key) => {
            return (
              <Tabs.TabPane
                tab={key}
                tabKey={key}
                key={key}
                // extra={
                //   <Button
                //     type="primary"
                //     onClick={() => {
                //       const table = [];
                //       for (let i = 0; i < data[key].length; i += 1) {
                //         const list = data[key][i];
                //         const obj: Record<string, string> = {};
                //         for (let j = 0; j < heads.length; j += 1) {
                //           const name = heads[j];
                //           obj[name] = list[j];
                //         }

                //         table.push(obj);
                //       }
                //       window.electron.ipcRenderer.sendMessage('download', {
                //         name: key,
                //         data: table,
                //       });
                //     }}
                //   >
                //     导出excel
                //   </Button>
                // }
              >
                <Wtable head={heads} data={data[key]} />
              </Tabs.TabPane>
            );
          })} */}
        </Tabs>
      </div>
    </div>
  );
};
